<template>
    <div id="signin">
    	<div class="cover">
    		<div class="leftpan">
    			
    		</div>
    		<div class="rightpan">
    			<div id="kmtitle">可米彩票</div>
    			<el-form id="kminput" :model="userInfo" :rules="rules" ref="userInfo">    				
    				<el-form-item class="kminput" prop="accountName">
    					<el-input type="text" v-model="userInfo.accountName" placeholder="请输入用户名"></el-input>
    				</el-form-item>
    				<el-form-item class="kminput" prop="password">
    					<el-input type="password" v-model="userInfo.password" placeholder="请输入密码"></el-input>
    				</el-form-item>
    				<el-form-item class="kminput" style="text-align: left;">
    					<el-switch
						  v-model="remember"
						  active-color="#13ce66"
						  inactive-color="#DCDFE6"
						  active-text="记住我"
						  >
						</el-switch>
    				</el-form-item>
    				<el-form-item class="kminput">
    					<el-button @click="signIn" type="success" style="width: 100%;font-size: 20px;">登录</el-button>
    				</el-form-item>
    			</el-form>
    			
    			<!--<input type="text" v-model="userInfo.accountName" placeholder="用户名">
        		<input type="text" v-model="userInfo.password" placeholder="密码">
        		<button @click="signIn">登录</button>-->
    		</div>
    	</div>
       
    </div>
</template>
<script>
export default {
    data(){
        return {
            userInfo: {
                accountName: 'zmt',
                password: '12345'
            },
            remember:true,
            rules:{
            	accountName: [
		            { required: true, message: '请输入用户名', trigger: 'blur' },
		            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
	          	],
	          	password:[
	          		{ required: true, message: '请输入密码', trigger: 'blur' },
	          	]
            }
            
         
        }
    },
    methods:{
        signIn(){
			this.$refs['userInfo'].validate((valid)=>{
				if(valid){
					this.$http.post('/signin',this.userInfo)
					.then((resp)=>{
					    console.log(resp);
					    if(resp.data.success){
					    	localStorage.setItem('isRemember',this.remember);
					    	localStorage.setItem("token",resp.data.token);
					    	localStorage.setItem("accountInfo",JSON.stringify(resp.data.response));
					    	if(this.$route.query.redirect){
					    		this.$router.push({path:this.$route.query.redirect})
					    	}else{
					    		this.$router.push({path:'/home'})
					    	}
					    }else{
                    //登录失败,弹出提示,使用用登录失败
                      this.$message.error('登录失败,请重新登录');
                    }
					})
					
				}else{
					return false
				}
			})
        }
    },
    created(){
    	this.remember = localStorage.getItem("isRemember")==='true'?true:false;
//  	window.onbeforeunload=(e)=>{
//  		if(!this.remember){
//  			
//  			localStorage.removeItem("token");
//  		}
//  	}
    }
}
</script>
<style lang="scss" scoped>
	#signin{
		width: 100%;
      	height: 100%;
        background:url('../../assets/llllgo.jpg') no-repeat;
        background-size: cover;
        
        .cover{
        	width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            display:flex;
            flex-direction:row;
        	
        	.leftpan {
        	width: 70%;
        	height: 100%;
        	
        	}
        	.rightpan{
	        	width: 30%;
	        	height: 100%;
	        	display: flex;
	        	flex-direction: column;
	        	justify-content: center;
	        	align-items: center;
	        	background: rgba(0,0,0,0.7);
	        	
	        	#kmtitle {
	        		color: #FFFFFF;
	        		font-size: 35px;
	        		font-weight: 800;
	        		margin-bottom: 30px;
	        	}
	        	#kminput {
	        		width: 70%;
	        		display: flex;
		        	flex-direction: column;
		        	text-align: center;
		        	
		        	.kminput{		        		
		        		margin-bottom: 10px;
		        		input {
		        			background: none;
		        			
		        		
		        		}
		        		
		        		.el-input {
		        			/deep/ input {		        				
                                background:rgba(0,0,0,0);   
                                border:none;  
                                outline: none; 
                            	border-radius: 0;
                                border-bottom: 1px solid #ffffff;                                                   
		        			}
		        		}
		        		
		        	}
	        	}
        	}
        }
        
	}
</style>